/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  Image,
  TouchableOpacity
} from 'react-native';

import Icon1 from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/App';

class ListItem extends Component {
	constructor(props) {  
		super(props);
		
		this.state = {
			color:["#ED705A","#F4A709","#6595DF","#50C897","#494949","#0000ff","#00ff00","#ff0000","#0000ff"],
		};
		
  	}
	
	BtnClick(i){
		if(this.props.callBackFunc == null) return;
		this.props.callBackFunc(i);
	}
	
//	<Icon name={this.props.icon[i]} size={18} color={this.state.color[i]}/>
	renderTabOption(tab, i) {
		let len = this.props.name.length;
		let bottomwidth = 1;
		if(len-1 === i){
			bottomwidth = 0;
		}
		
	   	return(
	   		<TouchableOpacity key={i} onPress={()=>{this.BtnClick(i)}}>
	      		<View style={[styles.list,{borderBottomWidth:bottomwidth}]}>
					<Icon name={this.props.icon[i]} size={22} color={this.state.color[i]}/>
		        	<Text style={{color:"#000000"}}>   {this.props.name[i]}</Text>
		        	<View style={{flex:1}}>
		        	</View>
		        	<Text style={{marginRight:10}}></Text>
		        	<Icon1 style={{marginRight:30}} name="angle-right" size={22} color="#111111"/>
	        	</View>
	       	</TouchableOpacity>
	   	);
	}
	    
  	render() {
  		let name = this.props.name;
  		let value = this.props.value;
  		
  		var buttonPress = {
	    	onPress: this.props.onPress
	    };
	    
    	return (
    		<View style={styles.devices}>
    			{this.props.name.map((tab, i) => this.renderTabOption(tab, i))}
    		</View>
    		
    	);
  	}
}

const styles = StyleSheet.create({
  	container: {
    	flex: 1,
    	justifyContent: 'center',
    	alignItems: 'center',
  	},
  	list:{
  		width: Dimensions.get('window').width,
  		height: 40,
  		justifyContent: 'center',
    	alignItems: 'center',
    	
    	borderBottomColor:"#eeeeee",
  		flexDirection: 'row'
  	},
  	leftspace:{
  		width:80,
  		justifyContent: 'center',
  	},
  	logo:{
  		width:60,
  		height:60
  	},
  	devices:{
		width:Dimensions.get('window').width - 20,
		marginLeft:10,
		marginTop:20,
	},
});

module.exports = ListItem;
